<template>
  <div class="login">
    <el-row>
      <el-col :span="12" :xs="0"> <h1 class="title">晓寒后台管理系统</h1></el-col>
      <el-col :span="12" :xs="24">
        <div class="login-form">
          <h1>Hello</h1>
          <h2>欢迎来到晓寒后台管理系统</h2>
          <el-form
            :label-position="labelPosition"
            label-width="auto"
            :model="form"
            ref="formRef"
            :rules="rules"
          >
            <el-form-item label="用户名" prop="username">
              <el-input type="text" placeholder="请输入用户名" v-model="form.username">
                <template #prefix>
                  <el-icon class="el-input__icon"><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                placeholder="请输入密码"
                v-model="form.password"
                show-password
              >
                <template #prefix>
                  <el-icon class="el-input__icon"><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="tologin(formRef)">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Lock, User } from '@element-plus/icons-vue'
import getTime from '@/utils/getTime'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/stores/user'
const router = useRouter()
const route = useRoute()
const labelPosition = ref('right')
const rules = ref({})
const form = ref({})
const formRef = ref(null)
form.value = {
  username: '',
  password: ''
}
rules.value = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const userStore = useUserStore()
const tologin = () => {
  console.log(form.value)
  formRef.value.validate(async valid => {
    if (valid) {
      console.log('校验通过，调用登录接口')
      let params = {
        ...form.value
      }
      const res = await userStore.userlogin(params)
      console.log(res, 'userlogin-res')
      if (res.data.code == 200) {
        console.log(res.data)
        localStorage.setItem('token', res.data.data.token)
        ElMessage({
          message: '登录成功',
          type: 'success',
          duration: 1500
        })
        router.push({ path: route.query.redirect || '/home' })
        ElNotification({
          title: `Hi！${getTime()}`,
          message: '欢迎回来！',
          type: 'success'
        })
      } else {
        ElMessage({
          message: res.data?.data?.message,
          type: 'error',
          duration: 1500
        })
      }
    } else {
      return false
    }
  })
}
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100%;
  background-image: url('../../assets/images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .title {
    color: #fff;
    margin: 0 auto;
    padding-top: 20vh;
    font-size: 50px;
    text-align: center;
  }
  .login-form {
    position: relative;
    width: 80%;
    margin: 0 auto;
    top: 30vh;
    background-image: url('../../assets/images/login_form.png');
    background-size: cover;
    & > h1 {
      font-size: 40px;
      color: #fff;
      padding: 20px 10px;
    }
    & > h2 {
      font-size: 20px;
      color: #fff;
      padding: 0 10px;
      margin-bottom: 20px;
    }
    .el-form {
      padding: 0 20px;
      :deep(.el-form-item__label) {
        color: #fff;
      }
    }
    .el-button {
      width: 100%;
      color: #fff;
      background-color: #409eff;
      border: none;
      &:hover {
        background-color: #79bbff;
      }
    }
  }
}
</style>
